<template>
	<view>
		<view class="userinfor">
			<view class="username">
				<text class="fwb">{{nikeName}}</text>
				<text class="cccc f14 mt5">欢迎光临四海香!</text>
			</view>
			<image :src="avtorImg" class="avatar" @click="getUserProfile"></image>
		</view>
		<view class="box">
			<image src="../../static/icon_order.png" class="imginfor"></image>
			<text class="ml5">烹饪历史</text>
			<text class="cccc moreinfor f20">&gt;</text>
		</view>
		<view class="box">
			<image src="../../static/icon_money.png" class="imginfor"></image>
			<text class="ml5">支付记录</text>
			<text class="cccc moreinfor f20">&gt;</text>
		</view>
		<navigator url="../complain/complain">
		<view class="box" >
			<image src="../../static/icon_msg.png" class="imginfor"></image>
			<text class="ml5">举报投诉</text>
			<text class="cccc moreinfor f20">&gt;</text>
		</view>
		</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfor: {}, //用户信息
			   avtorImg: "../../static/14.png", // 默认头像
			   nikeName: "小潺潺"
			}
		},
		methods: {
getUserProfile(){
	uni.getUserProfile({
					desc:'点击授权',
					success:(res)=>{								
						// console.log(res);
					uni.setStorageSync('infor',res.userInfo)
				let userinfor=uni.getStorageSync('infor')
				this.avtorImg=userinfor.avatarUrl
				this.nikeName=userinfor.nickName
					}
				})
}
		},
			// 分享
				onShareAppMessage(res) {
					if (res.from === 'menu') { // 来自页面内分享按钮
						console.log(res.target)
					}
					return {
						title: '我给大家分享一个新的小程序',
						// imageUrl: '../../static/man3.jpg',
						path: '/pages/index/index?id=123'
					}
				},
		onLoad() {
			// console.log(uni.getStorageSync('infor'))
			this.userinfor = uni.getStorageSync('infor')
			if(this.userinfor !=''){
				this.avtorImg=this.userinfor.avatarUrl
				this.nikeName=this.userinfor.nickName
			}
		}
	}
</script>

<style>
	.userinfor {
		display: flex;
		justify-content: space-between;
		padding: 10px;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
	}

	.username {
		display: flex;
		flex-direction: column;
	}

	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}

	.imginfor {
		width: 25px;
		height: 25px;
	}

	.box {
		padding: 10px;
		display: flex;
	align-items: center;
		border-bottom: 1px solid #eee;
		position: relative;
	}

	.moreinfor {
		position: absolute;
		right: 10px;
	}
</style>
